<template>
  <div class="content-node-box" :style="{'background-color': data.targetColor, 'border-color':data.targetColor}">
    <div class="target-box" v-if="data && data.data">
      <i class="ports left-ports" :style="{'border-color':data.targetColor}"></i>
      <i class="ports right-ports" :style="{'border-color':data.targetColor}"></i>
      <div class="node-top">
        <div class="word-ellipsis" :title="`${data.data.data.evaluarionContent}-${data.data.data.subitemWeight}%`">{{data.data.data.evaluarionContent}}-{{data.data.data.subitemWeight}}%</div>
        <i class="el-icon-star-off" size="16" v-if="data.data.data.keyItems === 1"></i>
      </div>
      <div class="node-bottom" :title="data.data.data.evaluarionCriterion">
        <div>{{data.data.data.evaluarionCriterion}}</div>
      </div>
    </div>
    <!-- <div class="line-box"></div>
    <div class="method-node-box" :style="{'background-color': bgColor, 'border-color':color, 'color': color}">
      <i class="ports left-ports" :style="{'border-color':color}"></i>
      <div class="method-node-top">
        <div class="method-node-title">分析策略</div>
        <el-checkbox v-model="choose" @change="handleChange"></el-checkbox>
      </div>
      <div class="method-node-content">上升值分析方法</div>
    </div> -->
  </div>
</template>

<script>
export default {
  name: 'ContentNode',
  inject: ["getGraph", "getNode"],
  data() {
		return {
      data: {},
      choose: false,
      bgColor: '#fff2e1',
      color: '#fd9100',
		}
	},
  mounted() {
    this.data = this.getNode().data
    console.log('1212',this.data)
  },
  methods: {
    handleChange() {
      this.$emit('change', this.getNode(), this.choose)
    }
  }
}
</script>

<style lang="scss" scoped>
.content-node-box {
  font-size: 16px;
  border: 2px solid;
  border-radius: 10px;
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.17);
  position: relative;
  .word-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .target-box {
    .ports {
      position: absolute;
      display: block;
      border-radius: 50%;
      width: 13px;
      height: 13px;
      top: 50%;
      transform: translateY(-50%);
      background-color: #ffffff;
      border: solid 2px;
    }
    .left-ports {
      left: -7px;
    }
    .right-ports {
      right: -7px;
    }
    .node-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #fff;
      font-size: 18px;
      padding: 10px;
    }
    .node-bottom {
      background-color: #fff;
      color: #585757;
      padding: 10px;
      border-radius: 0 0 10px 10px;
      height: 85px;
      display: -webkit-box;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
    }
  }
  .method-node-box {
    font-size: 18px;
    border-radius: 10px;
    border: solid 2px;
    padding: 4px;
    height: 60px;
    width: 140px;
    position: relative;
    .ports {
      position: absolute;
      display: block;
      border-radius: 50%;
      width: 13px;
      height: 13px;
      top: 50%;
      transform: translateY(-50%);
      background-color: #ffffff;
      border: solid 2px;
    }
    .left-ports {
      left: -7px;
    }
    .method-node-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .method-node-content {
      font-size: 16px;
    }
  }
}
</style>